<template>
  <el-dialog title="在线入库" :visible.sync="dialogFormVisible">
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="单号" :label-width="formLabelWidth" prop="bill_num">
        <el-input v-model="form.bill_num" autocomplete="off" />
      </el-form-item>
      <el-form-item label="单据日期" :label-width="formLabelWidth" prop="bill_date">
        <!-- <date-pick ref="billDate" :is-disabled-date="true" :value01="form.bill_date" @datePickVal="billDateFun" /> -->
        <bill-date-pick @datePickVal="billDateFun" />
      </el-form-item>
      <el-form-item label="仓库编号" :label-width="formLabelWidth" prop="warehouse_id">
        <el-input v-model="form.warehouse_id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="库位编号" :label-width="formLabelWidth" prop="storehouse_id">
        <el-input v-model="form.storehouse_id" autocomplete="off" />
      </el-form-item>
      <!-- <el-form-item label="产品代码" :label-width="formLabelWidth" prop="product_id">
        <el-input v-model="form.product_id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="批号" :label-width="formLabelWidth">
        <el-input v-model="form.batch_num" autocomplete="off" />
      </el-form-item>
      <el-form-item label="生产日期" :label-width="formLabelWidth" prop="produce_date">
        <produce-date-pick @datePickVal="produceDateFun" />
      </el-form-item> -->
      <el-form-item label="标签序列规格" :label-width="formLabelWidth" prop="code_size">
        <el-select v-model="form.code_size" placeholder="请选择活动区域">
          <el-option label="大码" value="shanghai" />
          <el-option label="中码" value="beijing" />
          <el-option label="小码" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="标签序列号" :label-width="formLabelWidth">
        <el-row>
          <el-col :span="19"><el-input v-model="form.code_num" autocomplete="off" /></el-col>
          <el-col :span="4" :offset="1"><el-button type="primary" @click="submitForm('form')">添加</el-button></el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <el-table v-if="gridData.length" :data="gridData" border>
      <el-table-column property="date" label="行号" width="150" />
      <el-table-column property="name" label="标签序列号" width="200" />
      <el-table-column property="address" label="库位编号" />
      <el-table-column property="address" label="产品名称" />
      <el-table-column property="address" label="批号" />
      <el-table-column property="address" label="生产日期" />
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import produceDatePick from './produce-date'
import billDatePick from './bill-date'
export default {
  components: {
    billDatePick
  },
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: '120px',
      form: {
        bill_num: '',
        bill_date: Date.now(),
        warehouse_id: '',
        storehouse_id: '',
        // product_id: '',
        // batch_num: '',
        // produce_date: '',
        code_size: '',
        code_num: ''
      },
      gridData: [],
      rules: {
        bill_num: [
          { required: true, message: '请输入单号', trigger: 'blur' }
        ],
        bill_date: [
          { type: 'date', required: true, message: '请选择单据日期', trigger: 'change' }
        ],
        // produce_date: [
        //   { type: 'date', required: true, message: '请选择生产日期', trigger: 'change' }
        // ],
        // code_size: [
        //   { required: true, message: '请选择生产日期', trigger: 'change' }
        // ],
        warehouse_id: [
          { required: true, message: '请输入单号', trigger: 'blur' }
        ],
        storehouse_id: [
          { required: true, message: '请输入单号', trigger: 'blur' }
        ],
        product_id: [
          { required: true, message: '请输入单号', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('success')
        } else {
          console.log('err')
        }
      })
    },
    billDateFun(val) {
      console.log(val)
      this.form.bill_date = val
    },
    produceDateFun(val) {
      console.log(val)
      this.form.produce_date = val
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
